<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- css -->
</head>
<body>
  <!-- html -->
  <!-- vue的项目只允许有一个根元素 -->
  <div id="app">
    <h2>hello, vue</h2>
    <!-- 在html里面，可以使用双大括号的语法，使用data里面的变量 -->
    <p>{{ msg }}</p>
    <p>count: {{ count }}</p>
    <button v-on:click="fn">count++</button>

    <ul>
      <li v-for="item in list">{{ item }}</li>
    </ul>

    <ul>
      <li v-for="item in list2">
        {{ item.name }}的库存还剩{{ item.num }}件
        <!-- v-model用在输入框，可以做数据的双向绑定 -->
        <input type="number" v-model="item.num">
      </li>
    </ul>
    <p>总库存为: {{ total }}</p>
  </div>

  
  <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
   <script src="../vue3.js"></script>

   <script>
    // js
    const { createApp } = Vue;

    const app = createApp({
      // 这个对象里面的key，叫做option(选项)

      // data里面放的就是响应式数据
      data() {
        return {
          msg: "Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。",
          count: 10,
          list: ["zhangsan", "lisi", "wangwu"],
          list2: [
            {
              name: "🍎",
              num: 5,
            },
            {
              name: "🍉",
              num: 10
            },
            {
              name: "🍌",
              num: 20
            }
          ]
        }
      },
      // methods里面写事件处理函数
      methods: {
        fn() {
          // vue里面是没有操作dom的
          // 只需要改变数据，页面就会自动更新(响应式)
          // this.count = 20;
          this.list.push("zhaoliu");
        }
      },
      // computed表示计算属性
      computed: {
        total() {
          return this.list2.reduce((sum, item) => {
            return sum += item.num;
          }, 0)
        }
      }
    })
    app.mount('#app');

   </script>
</body>
</html>